<script lang="ts" setup>
import Option from 'artplayer/types/option'
import BaseSimple from '@/components/BaseSimple/index.vue'
import BaseVideo from '@/components/BaseVideo/index.vue'
import {ref} from 'vue'

defineOptions({
	name: 'Home'
})

const videoConfig = ref<Option>({
	container: '#home',
	url: 'https://xy42x81x247x173xy.mcdn.bilivideo.cn:486/live-bvc/843355/live_50329118_9516950_av1/index.m3u8',
	autoplay: true,
	setting: true,
	playbackRate: true,
	aspectRatio: true,
	miniProgressBar: true,
	lock: true,
	flip: true,
	pip: true
})

const readyChange = () => {
	console.log('视频准备好了, 可以播放了')
}

const stateChange = (state: any) => {
	console.log(state, '视频状态改变了')
}
</script>

<template>
	<BaseSimple :file-size="20" :limit="1" file-type="other"/>
	<BaseVideo :config="videoConfig" art-id="home" class="home-video" @readyChange="readyChange" @stateChange="stateChange"/>
</template>

<style lang="scss" scoped>
.home-video {
	width: 1070px;
	height: 600px;
}
</style>
